<template>
   <div id='index'>
       <el-container>
           <el-header height="">
                  <img src='/static/logo.png'>
                  <span>问卷管理系统</span>
                  <el-button type="text" @click="logout">注销</el-button>
                  
            </el-header>
           <el-container>
               <el-aside width="200px">
                   <el-menu :default-active="curPath" :router="true">
                        <template v-for=" menu in menusList">
                            <!-- 含有一级目录 -->
                            <el-menu-item v-if="menu.children.length==0" :key="menu.sort" :index="menu.url">
                                 <i :class="menu.icon"></i> {{menu.text}}
                            </el-menu-item>
                            <!-- 含有子级目录 -->
                             <el-submenu v-if="menu.children.length>0" :index="menu.url" :key="menu.sort">
                                 <span slot="title"> <i :class="menu.icon"></i>  {{menu.text}}</span>
                                <el-menu-item v-for="submenu in menu.children" :index="submenu.url" :key="submenu.sort">
                                    <i :class="submenu.icon"></i> {{submenu.text}}
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
               </el-aside>
               <el-main height="">
                  <router-view></router-view>
               </el-main>
           </el-container>
       </el-container>
       
   </div>
</template>
<script>
export default {
  data() {
    return {
      menusList: []
    };
  },
  computed: {
    curPath() {
      return this.$route.path
    }
  },
  created() {
    this.getMenusList();
    //监听事件
    this.$root.$on('getMenusList',()=>{
        this.getMenusList()
    })
  },
  methods: {
    logout(){
      this.$http.get('/users/logout').then(result=>{
        this.$router.push('/login')
      })
    },
    getMenusList() {
      this.treeLoading = true;
      this.$http.get("/menus/list").then(result => {
        this.treeLoading = false;
        if (result.data.error > 0 && result.data.error == 4) {
          this.$router.push("/login");
          return;
        }
        this.menusList = this.$tree(result.data.data);
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

